// // 配置路由信息
import {Navigate, RouteObject } from "react-router-dom"
import React,{lazy,Component } from "react"
import { JSX } from 'react/jsx-runtime'

// 懒加载模式需要使用loding
const Layout=lazy(()=>import("@/layout/index"))
const Home=lazy(()=>import("@/pages/home/index"))

const Page404=lazy(()=>(import("@/pages/404/index")))


const Login=lazy(()=>import("@/pages/login/index"))
// <Suspense>占位组件
/*当懒加载组件还没有加载出来的时候，先用占位组件显示。里面有一个属性fallback，
里面传进去的组件就是占位组件。有<Suspense>表示该组件懒加载出来的，决定是否懒加载出来的看是不是React.lazy().*/
const withLoading=(somp:JSX.Element)=>(
    <React.Suspense fallback={<div>Loding</div>}>
           {somp}
        </React.Suspense>
)
// 导入所有router
// const metaRouters = import.meta.globEager("./modules/*.tsx");
const metaRouters:any = import.meta.glob("./modules/*.tsx",{ eager: true });

// 路由处理
export let routerArray: RouteObject[] = [];


for (const key in metaRouters) {
    // 这个path当路由的path，引入文件不区分大小写，手动改首字母大写
    // 根据自己的需要，自己组装path
    // let path = key.split("/")[5];
    // path =
    //   "/antd-doc/" + path.substring(0, 1).toLocaleUpperCase() + path.substring(1);
    //这个是组件，可以直接使用
    const component = metaRouters[key].default;
      routerArray.push(...component);
  }


interface rout{
    path:string,
    element:Component,
    label:"",
    children?:Array<any>
}
export interface routerInterfase extends rout{}
const RourterData:Array<any>=[
    {
        path: '/',
        element:<Navigate to='/home'></Navigate>, //路由重定，默认会跳转到/home路由下
        label:"首页",
        meta:{
            title:"首页"
        }
    },
    {
        path: '/',
        // <AutnToken><Layout></Layout></AutnToken>
        element:<Layout></Layout>,
        label:"首页",
        meta:{
            title:"首页"
        },
        children:[
            {
                path:'/home',
                element:withLoading(<Home></Home>),
                label:"首页",
                meta:{
                    title:"首页"
                }
            },
            ...routerArray
            // ... getLouter()
        ]
    },
    {
        path: '/login',
        element:<Login></Login>,
        label:"登录"
    },
    {
        path: '*',
        element:<Page404></Page404>,
        label:"404"
    },
]
// 将路由配置数组转换为Route组件
// const renderRoutes = () => RourterData.map((route:any, index:any) => (
//     <Route 
//       key={index}
//       path={route.path}
//       element={route.element}
     
//     ></Route>
//   ));
//   const renderRoutes =useRoutes(RourterData)
  export default RourterData;
  